<%@page contentType="text/html; charset=utf-8"%>
<%@include file="../header.jsp" %>
<style type="text/css">
    .left {
        float:left;
    }
    
    .right {
        float: right;
    }
</style>
<script type="text/javascript">
var msg_chart_not_loaded = "没有数据可以显示，请先上传";

$(document).ready(function() {
	createTargetShortageChart();
});

// 收入下滑
function createIncomeDownChart() {
	jQuery.post(webContext + "/data/query.do",{
		"type" : "一收入下滑仪表",
		"oneDay" : false,
		"itemNames" : "收入计划,实际收入"
	},function(data) {
		createLineChart("incomeDown", data);
		createIncomeDownAngularGauge("incomeDown", data);
	});
}

// 资金短缺
function createFundsShortageChart() {
	
	var chartName = "fundsShortage";
	jQuery.post(webContext + "/data/query.do",{
		"type" : "二资金短缺仪表",
		"itemNames" : "本日可用资金,本日资金差额"
	},function(data) {
		if (!data.success || data.data.length == 0) {
			$("#" + chartName + "PieDiv").html(msg_chart_not_loaded);
			$("#" + chartName + "PieDiv").html(msg_chart_not_loaded);
			return;
		}
		var myChart = new FusionCharts(chartsParent + "Pie2D.swf",
				chartName + "Pie", "350", "200", "0", "0");
		myChart.setDataXML(getFundsShortagePieChartXML(data.data));
		myChart.render(chartName + "PieDiv");
	});
}

//库存材料短缺
function createMaterialShortageChart() {
	var chartName = "materialShortage";
	jQuery.post(webContext + "/data/query.do",{
		"type" : "三库存断货仪表",
		"itemNames" : "短缺品种数,材料所占比例,酒水所占比例"
	},function(data) {
		if (!data.success || data.data.length == 0) {
			$("#" + chartName + "AngularGaugeDiv").html(msg_chart_not_loaded);
			$("#" + chartName + "PieDiv").html(msg_chart_not_loaded);
			return;
		}
		var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
				chartName + "AngularGauge", "350", "200", "0", "0");
		myChart.setDataXML(getMaterialShortageAngularGaugeChartXML(data.data));
		myChart.render(chartName + "AngularGaugeDiv");
		
		var myChart = new FusionCharts(chartsParent + "Pie2D.swf",
				chartName + "Pie", "350", "200", "0", "0");
		myChart.setDataXML(getMaterialShortagePieChartXML(data.data));
		myChart.render(chartName + "PieDiv");
	});
}

// 目标缺失
function createTargetShortageChart() {
	var chartName = "targetShortage";
	jQuery.post(webContext + "/data/query.do",{
		"type" : "四目标缺失仪表",
		"itemNameLike" : "%偏差率" // TODO:SQL Injection
	},function(data) {
		if (!data.success || data.data.length == 0) {
			$("#" + chartName + "ColumnDiv").html(msg_chart_not_loaded);
			return;
		}
		var myChart = new FusionCharts(chartsParent + "Column3D.swf",
				chartName + "Column", "850", "320", "0", "0");
				//alert(getTargetShortageColumn3DChartXML(data.data));
		myChart.setDataXML(getTargetShortageColumn3DChartXML(data.data));
		myChart.render(chartName + "ColumnDiv");
	});
}

// 呆死帐
function createBadDebtsAngularGaugeChart() {
	var chartName = "badDebts";
	jQuery.post(webContext + "/data/query.do",{
		"type" : "五呆账死帐仪表",
		"itemNames" : "呆账总金额,呆账总笔数"
	},function(data) {
		if (!data.success || data.data.length == 0) {
			$("#" + chartName + "AngularGaugeDiv").html(msg_chart_not_loaded);
			$("#" + chartName + "CylinderGaugeDiv").html(msg_chart_not_loaded);
			return;
		}
		var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
				chartName + "AngularGauge", "300", "300", "0", "0");
				//alert(getBadDebtsAngularGaugeChartXML(data.data));
		myChart.setDataXML(getBadDebtsAngularGaugeChartXML(data.data));
		myChart.render(chartName + "AngularGaugeDiv");
		// 量杯图
		var myChart = new FusionCharts(chartsParent + "Cylinder.swf",
				chartName + "CylinderGauge", "110", "300", "0", "0");
		myChart.setDataXML(getBadDebtsCylinderGaugeChartXML(data.data));
		myChart.render(chartName + "CylinderGaugeDiv");
	});
}

// 审批越权
function createExceedPowerAngularGaugeChart(data) {
	var chartName = "exceedPower";
	jQuery.post(webContext + "/data/query.do",{
		"type" : "六审批越权仪表",
		"itemNames" : "付款业务审批人越权次（笔）数,其他业务审批人越权次（笔）数"
	},function(data) {
		// 付款业务
		if (!data.success || data.data.length == 0) {
			$("#" + chartName + "AngularGaugeDiv1").html(msg_chart_not_loaded);
			$("#" + chartName + "AngularGaugeDiv2").html(msg_chart_not_loaded);
			return;
		}
		var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
				chartName + "AngularGauge1", "400", "300", "0", "0");
		myChart.setDataXML(getExceedPowerAngularGaugeChartXML(data.data[0].itemValue, "付款业务"));
		myChart.render(chartName + "AngularGaugeDiv1");
		
		// 其它业务
		var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
				chartName + "AngularGauge2", "410", "300", "0", "0");
		myChart.setDataXML(getExceedPowerAngularGaugeChartXML(data.data[1].itemValue, "其它业务"));
		myChart.render(chartName + "AngularGaugeDiv2");
	});
}

//财产流失与积压
function createPropertyRunoutAngularGaugeChart() {
    var chartName = "propertyRunout";
    jQuery.post(webContext + "/data/query.do",{
        "type" : "七财产流失仪表",
        "itemNames" : "盘亏品种数盘亏金额,积压品种数积压金额"
    },function(data) {
        // 流失
        if (!data.success || data.data.length == 0) {
            $("#" + chartName + "AngularGaugeDiv1").html(msg_chart_not_loaded);
            $("#" + chartName + "AngularGaugeDiv2").html(msg_chart_not_loaded);
            return;
        }
        var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
                chartName + "AngularGauge1", "400", "300", "0", "0");
        myChart.setDataXML(getPropertyRunoutAngularGaugeChartXML(data.data[0].itemValue, "盘点情况"));
        myChart.render(chartName + "AngularGaugeDiv1");
        
        // 积压
        var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
                chartName + "AngularGauge2", "410", "300", "0", "0");
        myChart.setDataXML(getPropertyRunoutAngularGaugeChartXML(data.data[1].itemValue, "积压情况"));
        myChart.render(chartName + "AngularGaugeDiv2");
    });
}

//利润下滑
function createProfitDownChart() {
    jQuery.post(webContext + "/data/query.do",{
        "type" : "八利润下滑仪表",
        "oneDay" : false,
        "itemNames" : "利润计划,实际利润"
    },function(data) {
        createProfitDownLineChart("profitDown", data);
        createProfitDownAngularGauge("profitDown", data);
    });
}

function createProfitDownLineChart(chartName, data) {
    if (!data.success || data.data.length == 0) {
        $("#" + chartName + "LineDiv").html(msg_chart_not_loaded);
        return;
    }
    var myChart = new FusionCharts(chartsParent + "Line.swf",
            chartName + "LineChart", "350", "200", "0", "0");
    myChart.setDataXML(getProfitDownLineChartXML(data));
    myChart.render(chartName + "LineDiv");
}

function createProfitDownAngularGauge(chartName, data) {
    if (!data.success) {
        $(chartName + "#AngularGaugeDiv").html(msg_chart_not_loaded);
        return;
    }
    
    var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
            chartName + "AngularGauge", "350", "200", "0", "0");
    myChart.setDataXML(getProfitDownAngularGaugeXML(data));
    myChart.render(chartName + "AngularGaugeDiv");
}

// 报表差错
function createSlipAngularGaugeChart() {
    var chartName = "slip";
    jQuery.post(webContext + "/data/query.do",{
        "type" : "九报表误差仪表",
        "itemNames" : "本期差错笔数,误差率"
    },function(data) {
        // 笔数
        if (!data.success || data.data.length == 0) {
            $("#" + chartName + "AngularGaugeDiv1").html(msg_chart_not_loaded);
            $("#" + chartName + "AngularGaugeDiv2").html(msg_chart_not_loaded);
            return;
        }
        var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
                chartName + "AngularGauge1", "400", "300", "0", "0");
        myChart.setDataXML(getSlipCountAngularGaugeChartXML(data.data[0].itemValue, "误差笔数"));
        myChart.render(chartName + "AngularGaugeDiv1");
        
        // 误差率
        var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
                chartName + "AngularGauge2", "410", "300", "0", "0");
        myChart.setDataXML(getSlipRateAngularGaugeChartXML(data.data[1].itemValue, "误差率"));
        myChart.render(chartName + "AngularGaugeDiv2");
    });
}

// 财务人员稳定性
function createFinancialEmployersGaugeChart() {
    var chartName = "financialEmployers";
    jQuery.post(webContext + "/data/query.do",{
        "type" : "十财务人员仪表",
        "itemNames" : "当前离职申请人数,当前缺编人数"
    },function(data) {
        if (!data.success || data.data.length == 0) {
            $("#" + chartName + "AngularGauge1").html(msg_chart_not_loaded);
            $("#" + chartName + "AngularGauge2").html(msg_chart_not_loaded);
            return;
        }
        // 离职人数
        var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
                chartName + "AngularGauge1", "400", "300", "0", "0");
        myChart.setDataXML(getSlipCountAngularGaugeChartXML(data.data[0].itemValue, "当前离职申请人数"));
        myChart.render(chartName + "AngularGaugeDiv1");
        
        // 缺编人数
        var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
                chartName + "AngularGauge2", "410", "300", "0", "0");
        myChart.setDataXML(getSlipCountAngularGaugeChartXML(data.data[1].itemValue, "当前缺编人数"));
        myChart.render(chartName + "AngularGaugeDiv2");
    });
}

// 财务部门横向沟通问题
function createFinancialDepartmentGaugeChart() {
    var chartName = "financialDepartment";
    jQuery.post(webContext + "/data/query.do",{
        "type" : "十一横向沟通仪表",
        "itemNames" : "财务发起工作受阻项数,财务接受工作未完成项数"
    },function(data) {
        if (!data.success || data.data.length == 0) {
            $("#" + chartName + "AngularGauge1").html(msg_chart_not_loaded);
            $("#" + chartName + "AngularGauge2").html(msg_chart_not_loaded);
            return;
        }
        // 财务发起工作受阻项数
        var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
                chartName + "AngularGauge1", "400", "300", "0", "0");
        myChart.setDataXML(getSlipCountAngularGaugeChartXML(data.data[0].itemValue, "财务发起工作受阻项数"));
        myChart.render(chartName + "AngularGaugeDiv1");
        
        // 财务接受工作未完成项数
        var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
                chartName + "AngularGauge2", "410", "300", "0", "0");
        myChart.setDataXML(getSlipCountAngularGaugeChartXML(data.data[1].itemValue, "财务接受工作未完成项数"));
        myChart.render(chartName + "AngularGaugeDiv2");
    });
}

//预警值变更
function createWarningValueChangeGaugeChart() {
    var chartName = "warningValueChange";
    jQuery.post(webContext + "/data/query.do",{
        "type" : "十二预警值变更仪表",
        "itemNames" : "预警灵敏度更粗放项数,预警灵敏度更精细项数,预警项目新增项数,预警项目删减项数"
    },function(data) {
        if (!data.success || data.data.length == 0) {
            $("#" + chartName + "AngularGaugeDiv1").html(msg_chart_not_loaded);
            $("#" + chartName + "AngularGaugeDiv2").html(msg_chart_not_loaded);
            return;
        }
        // 灵敏度
        var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
                chartName + "AngularGauge1", "400", "300", "0", "0");
        myChart.setDataXML(getWarningValueChangeAngularGaugeChartXML(-data.data[0].itemValue, data.data[2].itemValue, "灵敏度（宽严数）"));
        myChart.render(chartName + "AngularGaugeDiv1");
        
        // 预警数
        var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
                chartName + "AngularGauge2", "400", "300", "0", "0");
        myChart.setDataXML(getWarningValueChangeAngularGaugeChartXML2(data.data[1].itemValue, data.data[3].itemValue, "预警数（新增新减）"));
        myChart.render(chartName + "AngularGaugeDiv2");
    });
}

function queryUngency() {
    jQuery.post(webContext + "/data/query.do",{
        "type" : "十三紧急事项闪烁表",
        "itemNameLike" : "待批事项,待阅%"
    },function(data) {
        if (!data.success || data.data.length == 0) {
            return;
        }
        $("#daipi").html(data.data[0]);
    });
}

function createLineChart(chartName, data) {
	if (!data.success || data.data.length == 0) {
		$("#" + chartName + "LineDiv").html(msg_chart_not_loaded);
		return;
	}
	var myChart = new FusionCharts(chartsParent + "Line.swf",
			chartName + "LineChart", "350", "200", "0", "0");
	myChart.setDataXML(getLineChartXML(data));
	myChart.render(chartName + "LineDiv");
}

function createIncomeDownAngularGauge(chartName, data) {
	if (!data.success || data.data.length == 0) {
		$("#AngularGaugeDiv").html(msg_chart_not_loaded);
		return;
	}
	
	var myChart = new FusionCharts(chartsParent + "AngularGauge.swf",
			"incomeDownAngularGauge", "350", "200", "0", "0");
	myChart.setDataXML(getIncomeDownAngularGaugeXML(data));
	myChart.render("incomeDownAngularGaugeDiv");
}
//-------------------------------------------------------------------------------------------------------------------------

function getLineChartXML(data) {
	var yAxisMaxValue = 0;
	var sets = "";
	$.each(data.data, function(i, obj) {
		yAxisMaxValue = Math.max(obj.itemValue, yAxisMaxValue);
		if (obj.itemName == "收入计划") {
			sets += "<set label='" + obj.accdate + "' value='" + obj.itemValue + "' />";
		}
	});
	yAxisMaxValue += 30; // 为了美观，顶部留一点空间
	
	var line = "";
	if (data.data.length > 0) {
		var lineValue = data.data[data.data.length-2].itemValue; // 当天的计划
		var height = 1; // 计划线的高度
		line = "<line startvalue='" + lineValue + "' endValue='" + (lineValue+height) + "' displayValue='今日计划' color='000000' isTrendZone='1' showOnTop='0' alpha='255' valueOnRight='1'/>";
	}
	return "<chart yAxisMaxValue='" + yAxisMaxValue + "' bgColor='91AF46,FFFFFF' divLineColor='91AF46' divLineAlpha='30' alternateHGridAlpha='5' canvasBorderColor='666666' baseFontColor='666666' lineColor='91AF46' numVDivlines='7' showAlternateVGridColor='1' anchorSides='3' anchorRadius='5' showValues='0'>" +
			sets + 
			"<trendlines>  " +
			line +
			"</trendlines>  " +
			"<styles>  <definition>  <style name='Anim1' type='animation' param='_alpha' start='0' duration='1' />  </definition>  <application>  <apply toObject='TRENDLINES' styles='Anim1' />  </application>  </styles>  </chart>";
}

function getIncomeDownAngularGaugeXML(data) {
	var plan = 0;
	var actual = 0;
	if (data.data.length > 0) {
		plan = data.data[data.data.length - 2].itemValue; // 最后二条是最新的数据
		actual = data.data[data.data.length - 1].itemValue;
	}
	
	var max = 100;
	var actualRate = actual / plan * 100;
	var point = "";
	if (actualRate > 100) {
		max = actualRate;
		point = "<point value='" + (plan/actual * 100) + "' displayValue='计划' fontcolor='FF4400' useMarker='1' dashed='1' dashLen='2' dashGap='2' valueInside='1' /> ";
	}
	return "<chart bgAlpha='0' bgColor='FFFFFF' lowerLimit='0' upperLimit='" + max + "' numberSuffix='%25' showBorder='0' basefontColor='FFFFDD' chartTopMargin='25' chartBottomMargin='25' chartLeftMargin='25' " +
			"chartRightMargin='25' toolTipBgColor='80A905' gaugeFillMix='{dark-10},FFFFFF,{dark-10}' gaugeFillRatio='3'> <" +
			"colorRange> " +
			"<color minValue='0' maxValue='45' code='FF654F'/> " +
			"<color minValue='45' maxValue='80' code='F6BD0F'/> " +
			"<color minValue='80' maxValue='100' code='8BBA00'/> " +
			"</colorRange>  " +
			"<dials> <dial value='" + actualRate + "' rearExtension='10'/> </dials>  " +
			"<trendpoints> " + point + "</trendpoints>  " +
			"<!--Rectangles behind the gauge --> " +
			"<annotations> " +
			"<annotationGroup id='Grp1' showBelow='1' > " +
			"<annotation type='rectangle' x='5' y='5' toX='345' toY='195' radius='10' color='009999,333333' showBorder='0' /> " +
			"</annotationGroup> " +
			"</annotations>  " +
			"<styles> <definition> " +
			"<style name='RectShadow' type='shadow' strength='3'/> " +
			"</definition> " +
			"<application> " +
			"<apply toObject='Grp1' styles='RectShadow' /> " +
			"</application> </styles> </chart>";
}

function getFundsShortagePieChartXML(data) {
	var availableFunds = data[data.length - 2].itemValue;
	var fundsMargin = data[data.length - 1].itemValue;
	return "<chart palette='4'>" + 
	"<set label='可用资金' value='" + availableFunds + "'/>" + 
	"<set label='资金缺口' alpha='80' color='#ff0000' value='" + fundsMargin + "' isSliced='1'/>" + 
	"</chart>";
}

function getMaterialShortageAngularGaugeChartXML(data) {
	var max = 100;
	var itemValue = data[data.length - 3].itemValue;
	return "<chart bgAlpha='0' bgColor='FFFFFF' lowerLimit='0' upperLimit='" + max + "' numberSuffix='' showBorder='0' basefontColor='FFFFDD' chartTopMargin='25' chartBottomMargin='25' chartLeftMargin='25' " +
	"chartRightMargin='25' toolTipBgColor='80A905' gaugeFillMix='{dark-10},FFFFFF,{dark-10}' gaugeFillRatio='3'> <" +
	"colorRange> " +
	"<color minValue='0' maxValue='45' code='FF654F'/> " +
	"<color minValue='45' maxValue='80' code='F6BD0F'/> " +
	"<color minValue='80' maxValue='100' code='8BBA00'/> " +
	"</colorRange>  " +
	"<dials> <dial value='" + itemValue + "' rearExtension='10'/> </dials>  " +
	"<!--Rectangles behind the gauge --> " +
	"<annotations> " +
	"<annotationGroup id='Grp1' showBelow='1' > " +
	"<annotation type='rectangle' x='5' y='5' toX='345' toY='195' radius='10' color='009999,333333' showBorder='0' /> " +
	"</annotationGroup> " +
	"</annotations>  " +
	"<styles> <definition> " +
	"<style name='RectShadow' type='shadow' strength='3'/> " +
	"</definition> " +
	"<application> " +
	"<apply toObject='Grp1' styles='RectShadow' /> " +
	"</application> </styles> </chart>";
}

function getMaterialShortagePieChartXML(data) {
	var material1Name = data[data.length - 2].itemName;
	var material1Margin = data[data.length - 2].itemValue;
	var material2Name = data[data.length - 1].itemValue;
	var material2Margin = data[data.length - 1].itemValue;
	return "<chart palette='4'>" + 
	"<set label='" + material1Name + "' value='" + material1Margin + "'/>" + 
	"<set label='" + material2Name + "' alpha='80' color='#ff0000' value='" + material2Margin + "' />" + 
	"</chart>";
}

function getTargetShortageColumn3DChartXML(data) {
	var sets = "";
	$.each(data, function(i, obj) {
		sets += "<set label='" + obj.itemName + "' value='" + obj.itemValue + "' />";
	});
	return "<chart caption='' yAxisMaxValue='150' showYAxisValues='1' xAxisName='指标名称' yAxisName='偏离度' numberSuffix='%25' showValues='0'> " +
			sets +
			" <trendLines> " +
			"<line startValue='100' color='009933' displayvalue='100%' /> " +
			"</trendLines>  </chart>";
}

function getBadDebtsAngularGaugeChartXML(data) {
	var badDebtsAmount = data[0].itemValue;
	return "<chart manageResize='1' origW='200' origH='300' palette='3' bgColor='333333' bgAlpha='50' numberSuffix='万' lowerLimit='0' upperLimit='70' gaugeStartAngle='240' gaugeEndAngle='-60' gaugeOuterRadius='120' gaugeInnerRadius='60%' gaugeFillMix='{light-10},{light-30},{light-20},{dark-5},{color},{light-30},{light-20},{dark-10}' gaugeFillRatio=''  baseFontColor='FFFFFF' toolTipBgColor='333333' toolTipBorderColor='333333' decimals='1' gaugeOriginX='150' gaugeOriginY='150'> <colorRange> <color minValue='0' maxValue='30' /> <color minValue='30' maxValue='50' /> <color minValue='50' maxValue='80' /> <color minValue='80' maxValue='100'  /> </colorRange> " +
			"<dials> " +
			"<dial id='Dial1' value='" + badDebtsAmount + "' baseWidth='6' topWidth='1' editMode='1' rearExtension='10' showValue='1' valueY='250'/> " +
			"</dials> " +
			"<styles> <definition> <style type='font' name='valueFont' borderColor='FFFFFF' bold='1' size='13'/> </definition> " +
			"<application> <apply toObject='value' styles='valueFont'/> </application> </styles> </chart>";
}

function getBadDebtsCylinderGaugeChartXML(data) {
	var badDebtsCount = data[1].itemValue;
	return "<chart manageResize='1' bgColor='F1F1FD' lowerLimit='0' upperLimit='100' showTickMarks='0' numberSuffix=' 笔' tickValueDistance='20' decmials='0' tickMarkDecmials='0' cylFillColor='996633' cylRadius='45' showValue='0'> " +
			" <value> " + badDebtsCount + "</value>  " +
			"<annotations>  <annotationGroup> " +
			"<annotation type='text' label='呆死帐共" + badDebtsCount + "笔' font='Verdana' x='24' y='20' align='left' vAlign='bottom' fontcolor='333333' fontSize='10'/>  " +
			" </annotationGroup>  </annotations>  </chart>";
}

function getExceedPowerAngularGaugeChartXML(count, title) {
	return "<chart manageResize='1' manageValueOverlapping='1' autoAlignTickValues='1'  bgColor='AEC0CA,FFFFFF' fillAngle='45' upperLimit='10' lowerLimit='0' majorTMNumber='10' majorTMHeight='8' showGaugeBorder='0' gaugeOuterRadius='140' gaugeOriginX='205' gaugeOriginY='206' gaugeInnerRadius='2' formatNumberScale='1' numberPrefix=''  decmials='2' tickMarkDecimals='1' pivotRadius='17' showPivotBorder='1' pivotBorderColor='000000' pivotBorderThickness='5' pivotFillMix='FFFFFF,000000' tickValueDistance='10' > " +
			" <colorRange>  <color minValue='0' maxValue='4' code='399E38'/> " +
			" <color minValue='4' maxValue='8' code='E48739'/>  " +
			"<color minValue='8' maxValue='10' code='B41527'/>  " +
			"</colorRange> " +
			" <dials> " +
			" <dial value='" + count + "' borderAlpha='0' bgColor='000000' baseWidth='28' topWidth='1' radius='130'/>  </dials>  " +
			"<annotations>  " +
			"<!-- Draw the background arcs -->  " +
			"<annotationGroup x='155' y='227.5'>  " +
			"<annotation type='text' label='" + title + "' font='Verdana' x='20' y='20' align='left' vAlign='bottom' fontcolor='333333' fontSize='15'/>  " +
			"</annotationGroup>  </annotations>  </chart>";
}

function getPropertyRunoutAngularGaugeChartXML(amount, title) {
    return "<chart manageResize='1' manageValueOverlapping='1' autoAlignTickValues='1'  bgColor='AEC0CA,FFFFFF' fillAngle='45' " +
            "upperLimit='100' lowerLimit='0' majorTMNumber='10' majorTMHeight='8' showGaugeBorder='0' gaugeOuterRadius='140' gaugeOriginX='205' gaugeOriginY='206' gaugeInnerRadius='2' formatNumberScale='1' numberPrefix=''  decmials='2' tickMarkDecimals='1' pivotRadius='17' showPivotBorder='1' pivotBorderColor='000000' pivotBorderThickness='5' pivotFillMix='FFFFFF,000000' tickValueDistance='10' > " +
    " <colorRange>  <color minValue='0' maxValue='40' code='399E38'/> " +
    " <color minValue='40' maxValue='80' code='E48739'/>  " +
    "<color minValue='80' maxValue='100' code='B41527'/>  " +
    "</colorRange> " +
    " <dials> " +
    " <dial value='" + amount + "' borderAlpha='0' bgColor='000000' baseWidth='28' topWidth='1' radius='130'/>  </dials>  " +
    "<annotations>  " +
    "<!-- Draw the background arcs -->  " +
    "<annotationGroup x='155' y='227.5'>  " +
    "<annotation type='text' label='" + title + "' font='Verdana' x='20' y='20' align='left' vAlign='bottom' fontcolor='333333' fontSize='15'/>  " +
    "</annotationGroup>  </annotations>  </chart>";
}

function getSlipCountAngularGaugeChartXML(count, title) {
    return "<chart manageResize='1' manageValueOverlapping='1' autoAlignTickValues='1'  bgColor='AEC0CA,FFFFFF' fillAngle='45' " +
    "upperLimit='100' lowerLimit='0' majorTMNumber='10' majorTMHeight='8' showGaugeBorder='0' gaugeOuterRadius='140' gaugeOriginX='205' gaugeOriginY='206' gaugeInnerRadius='2' formatNumberScale='1' numberPrefix=''  decmials='2' tickMarkDecimals='1' pivotRadius='17' showPivotBorder='1' pivotBorderColor='000000' pivotBorderThickness='5' pivotFillMix='FFFFFF,000000' tickValueDistance='10' > " +
    " <colorRange>  <color minValue='0' maxValue='40' code='399E38'/> " +
    " <color minValue='40' maxValue='80' code='E48739'/>  " +
    "<color minValue='80' maxValue='100' code='B41527'/>  " +
    "</colorRange> " +
    " <dials> " +
    " <dial value='" + count + "' borderAlpha='0' bgColor='000000' baseWidth='28' topWidth='1' radius='130'/>  </dials>  " +
    "<annotations>  " +
    "<!-- Draw the background arcs -->  " +
    "<annotationGroup x='155' y='227.5'>  " +
    "<annotation type='text' label='" + title + "' font='Verdana' x='20' y='20' align='left' vAlign='bottom' fontcolor='333333' fontSize='15'/>  " +
    "</annotationGroup>  </annotations>  </chart>";
}

function getProfitDownLineChartXML(data) {
    var yAxisMaxValue = 0;
    var sets = "";
    $.each(data.data, function(i, obj) {
        yAxisMaxValue = Math.max(obj.itemValue, yAxisMaxValue);
        if (obj.itemName == "利润计划") {
            sets += "<set label='" + obj.accdate + "' value='" + obj.itemValue + "' />";
        }
    });
    yAxisMaxValue += 30; // 为了美观，顶部留一点空间
    
    var line = "";
    if (data.data.length > 0) {
        var lineValue = data.data[data.data.length-2].itemValue; // 当天的计划
        var height = 30; // 计划线的高度
        line = "<line startvalue='" + lineValue + "' endValue='" + (lineValue+height) + "' displayValue='利润计划' color='000000' isTrendZone='1' showOnTop='0' alpha='255' valueOnRight='1'/>";
    }
    return "<chart yAxisMaxValue='" + yAxisMaxValue + "' bgColor='91AF46,FFFFFF' divLineColor='91AF46' divLineAlpha='30' alternateHGridAlpha='5' canvasBorderColor='666666' baseFontColor='666666' lineColor='91AF46' numVDivlines='7' showAlternateVGridColor='1' anchorSides='3' anchorRadius='5' showValues='0'>" +
            sets + 
            "<trendlines>  " +
            line +
            "</trendlines>  " +
            "<styles>  <definition>  <style name='Anim1' type='animation' param='_alpha' start='0' duration='1' />  </definition>  <application>  <apply toObject='TRENDLINES' styles='Anim1' />  </application>  </styles>  </chart>";
}

function getProfitDownAngularGaugeXML(data) {
    var plan = 0;
    var actual = 0;
    if (data.data.length > 0) {
        plan = data.data[data.data.length - 2].itemValue; // 最后二条是最新的数据
        actual = data.data[data.data.length - 1].itemValue;
    }
    
    var max = 100;
    var actualRate = actual / plan * 100;
    var point = "";
    if (actualRate > 100) {
        max = actualRate;
        point = "<point value='" + (plan/actual * 100) + "' displayValue='计划' fontcolor='FF4400' useMarker='1' dashed='1' dashLen='2' dashGap='2' valueInside='1' /> ";
    }
    return "<chart bgAlpha='0' bgColor='FFFFFF' lowerLimit='0' upperLimit='" + max + "' numberSuffix='%25' showBorder='0' basefontColor='FFFFDD' chartTopMargin='25' chartBottomMargin='25' chartLeftMargin='25' " +
            "chartRightMargin='25' toolTipBgColor='80A905' gaugeFillMix='{dark-10},FFFFFF,{dark-10}' gaugeFillRatio='3'> <" +
            "colorRange> " +
            "<color minValue='0' maxValue='45' code='FF654F'/> " +
            "<color minValue='45' maxValue='80' code='F6BD0F'/> " +
            "<color minValue='80' maxValue='100' code='8BBA00'/> " +
            "</colorRange>  " +
            "<dials> <dial value='" + actualRate + "' rearExtension='10'/> </dials>  " +
            "<trendpoints> " + point + "</trendpoints>  " +
            "<!--Rectangles behind the gauge --> " +
            "<annotations> " +
            "<annotationGroup id='Grp1' showBelow='1' > " +
            "<annotation type='rectangle' x='5' y='5' toX='345' toY='195' radius='10' color='009999,333333' showBorder='0' /> " +
            "</annotationGroup> " +
            "</annotations>  " +
            "<styles> <definition> " +
            "<style name='RectShadow' type='shadow' strength='3'/> " +
            "</definition> " +
            "<application> " +
            "<apply toObject='Grp1' styles='RectShadow' /> " +
            "</application> </styles> </chart>";
}

function getSlipRateAngularGaugeChartXML(rate, title) {
    return "<chart manageResize='1' manageValueOverlapping='1' autoAlignTickValues='1'  bgColor='AEC0CA,FFFFFF' numberSuffix='%25' fillAngle='45' " +
    "upperLimit='100' lowerLimit='0' majorTMNumber='10' majorTMHeight='8' showGaugeBorder='0' gaugeOuterRadius='140' gaugeOriginX='205' gaugeOriginY='206' gaugeInnerRadius='2' formatNumberScale='1' numberPrefix=''  decmials='2' tickMarkDecimals='1' pivotRadius='17' showPivotBorder='1' pivotBorderColor='000000' pivotBorderThickness='5' pivotFillMix='FFFFFF,000000' tickValueDistance='10' > " +
    " <colorRange>  <color minValue='0' maxValue='40' code='399E38'/> " +
    " <color minValue='40' maxValue='80' code='E48739'/>  " +
    "<color minValue='80' maxValue='100' code='B41527'/>  " +
    "</colorRange> " +
    " <dials> " +
    " <dial value='" + rate + "' borderAlpha='0' bgColor='000000' baseWidth='28' topWidth='1' radius='130'/>  </dials>  " +
    "<annotations>  " +
    "<!-- Draw the background arcs -->  " +
    "<annotationGroup x='155' y='227.5'>  " +
    "<annotation type='text' label='" + title + "' font='Verdana' x='20' y='20' align='left' vAlign='bottom' fontcolor='333333' fontSize='15'/>  " +
    "</annotationGroup>  </annotations>  </chart>";
}

function getWarningValueChangeAngularGaugeChartXML2(value1, value2, title) {
	return "<chart manageResize='1' manageValueOverlapping='1' autoAlignTickValues='1' bgColor='AEC0CA,FFFFFF' numberSuffix='' fillAngle='45' " +
    "upperLimit='8' lowerLimit='0' majorTMNumber='10' majorTMHeight='8' showGaugeBorder='0' gaugeOuterRadius='140' gaugeOriginX='205' gaugeOriginY='206' gaugeInnerRadius='2' formatNumberScale='1' numberPrefix=''  decmials='2' tickMarkDecimals='1' pivotRadius='17' showPivotBorder='1' pivotBorderColor='000000' pivotBorderThickness='5' pivotFillMix='FFFFFF,000000' tickValueDistance='10' > " +
    " <colorRange>" +
    " <color minValue='0' maxValue='4' code='E48739'/>  " +
    "<color minValue='4' maxValue='8' code='399E38'/>  " +
    "</colorRange> " +
    " <dials> " +
    " <dial value='" + value1 + "' borderAlpha='0' bgColor='000000' baseWidth='28' topWidth='1' radius='130'/>" +
    " <dial value='" + value2 + "' borderAlpha='0' bgColor='000000' baseWidth='28' topWidth='1' radius='130'/>" +
    "</dials>  " +
    "<annotations>  " +
    "<!-- Draw the background arcs -->  " +
    "<annotationGroup x='135' y='227.5'>  " +
    "<annotation type='text' label='" + title + "' font='Verdana' x='20' y='20' align='left' vAlign='bottom' fontcolor='333333' fontSize='15'/>  " +
    "</annotationGroup>" + 
    "</annotations>  </chart>";
}

function getWarningValueChangeAngularGaugeChartXML(value1, value2, title) {
    return "<chart manageResize='1' manageValueOverlapping='1' autoAlignTickValues='1' bgColor='AEC0CA,FFFFFF' numberSuffix='' fillAngle='45' " +
    "upperLimit='5' lowerLimit='-5' majorTMNumber='10' majorTMHeight='8' showGaugeBorder='0' gaugeOuterRadius='140' gaugeOriginX='205' gaugeOriginY='206' gaugeInnerRadius='2' formatNumberScale='1' numberPrefix=''  decmials='2' tickMarkDecimals='1' pivotRadius='17' showPivotBorder='1' pivotBorderColor='000000' pivotBorderThickness='5' pivotFillMix='FFFFFF,000000' tickValueDistance='10' > " +
    " <colorRange>" +
    " <color minValue='-5' maxValue='0' code='E48739'/>  " +
    "<color minValue='0' maxValue='5' code='399E38'/>  " +
    "</colorRange> " +
    " <dials> " +
    " <dial value='" + value1 + "' borderAlpha='0' bgColor='000000' baseWidth='28' topWidth='1' radius='130'/>" +
    " <dial value='" + value2 + "' borderAlpha='0' bgColor='000000' baseWidth='28' topWidth='1' radius='130'/>" +
    "</dials>  " +
    "<annotations>  " +
    "<!-- Draw the background arcs -->  " +
    "<annotationGroup x='135' y='227.5'>  " +
    "<annotation type='text' label='" + title + "' font='Verdana' x='20' y='20' align='left' vAlign='bottom' fontcolor='333333' fontSize='15'/>  " +
    "</annotationGroup>" + 
    "<annotationGroup x='10' y='190'>  " +
    "<annotation type='text' label='放宽项' font='Verdana' x='20' y='20' align='left' vAlign='bottom' fontcolor='333333' fontSize='15'/>  " +
    "</annotationGroup>" + 
    "<annotationGroup x='310' y='190'>  " +
    "<annotation type='text' label='精细项' font='Verdana' x='20' y='20' align='left' vAlign='bottom' fontcolor='333333' fontSize='15'/>  " +
    "</annotationGroup>" + 
    "</annotations>  </chart>";
}

</script>
<body style="overflow:hidden">
<div id="rightsiber">
               <ul class="diver">
                    <li>
                        <p><a class="detailLink" href="${pageContext.request.contextPath}/views/main_details.jsp?type=3" target="_blank"><h2>目标缺失仪表盘</h2></a></p>
                        <span id="targetShortageColumnDiv">Loading...</span>
                    </li>
                </ul> 
            </div>
</body>